<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<title>保单编辑</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
</head>
<body>
	<form class="layui-form" action="">
		<table class="layui-table">
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>客户姓名</th>
					<th>手机号码</th>
					<th>车牌号</th>
					<th>车辆信息</th>
				</tr>
			</thead>
			<tbody>
				<tr>

					<td id="memberName" data-id=""></td>
					<td id="memberPhone"></td>
					<td id="carPlateNumber"></td>
					<td id="carInfo"></td>
				</tr>
			</tbody>
		</table>

		<table class="layui-table">
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>服务类型</th>
					<th>服务名称</th>
					<th>服务单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><select name="city" lay-verify="required" id="category"
						lay-filter="categoryFilter">
							<option value="">--请选择产品类型--</option>
					</select></td>
					<td><select name="city" lay-verify="required" id="product"
						lay-filter="productFilter">
							<option value="">--请选择具体产品--</option>

					</select></td>
					<td id="productPrice"></td>
					<td><button class="layui-btn" lay-submit=""
							lay-filter="addProducts">
							<i class="layui-icon">&#xe608;</i> 添加
						</button></td>
				</tr>
			</tbody>
		</table>

		<table class="layui-table">
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>服务类型</th>
					<th>服务名称</th>
					<th>服务单价(元)</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="sendList">
				<tr id="emptyRow">
					<td colspan="7" align="center">列表空空的,什么也没有</td>
				</tr>
			</tbody>
		</table>

	</form>


	<!-- <div>
	<input type="hidden" id="memberId" th:value="${bean.id}">
		<input type="hidden" id="packId" value="">
	</div> -->


	<div align="right" style="padding: 20px">
		<button class="layui-btn" lay-submit="" lay-filter="finish">结算</button>

	</div>
	<div></div>

	<script type="text/javascript" src="/plugins/layui/layui.js"></script>
		<script type="text/javascript">
layui.config({
    base: '/js/admin/'
}).extend({
    ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
    $tool: 'tool'
}).use(['form', 'layer', 'tree', 'jquery', 'ajaxExtention', '$tool'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        $ = layui.jquery,
        $tool = layui.$tool;
    var globalProducts;
	
	  
	  form.on('select(categoryFilter)', function(data){
		  if(data.value!=''){
			  $("#product").html("<option value=''>--请选择具体产品--<option>");
			//  form.render();
			  var products=getProductsByCateId(data.value);
			  var productHtml="";
			  for(var i=0;i<products.length;i++){	
				  productHtml += "<option value='"+products[i].id+"'>"+products[i].name+"</option>"
              }  
			 $("#product").append(productHtml) ;
			
		  }else{
			  $("#product").html("");
		  }
		  form.render();
      });
	  
	  form.on('select(productFilter)', function(data){
		  if(data.value!=''){
			 $("#productPrice").html(getProductByProId(data.value).price) ;
			 $("#productDesc").html(getProductByProId(data.value).description) ;
		  }else{
			  $("#productPrice").html("");
			  $("#productDesc").html("");

		  }
		  form.render();
      });
	  
	  initProductInfo();
     
    /**
     * 初始化用户信息
     * */
    function getProductsByCateId(cateId){
 	   for(var i=0;i<globalProducts.length;i++){	
 		   if(globalProducts[i].category.id==cateId){
 			   return globalProducts[i].products;
 		   }
 	   }
 	}
    
    function getProductByProId(proId){
  	   for(var i=0;i<globalProducts.length;i++){
  		   var products=globalProducts[i].products;
  		  for(var i=0;i<products.length;i++){
  	  		   if(products[i].id==proId){
  	  			   return products[i];
  	  		   }
  	  	   }
  		  
  	   }
  	}
    
 
    	//计算当前 表里元素的总价格
    	
    	function calculate(){
    		var total=0;
    		 if($("#sendList:has(tr)").length==0){
    			 return 0;
    		 }else{
    			 $("#sendList .valid_tr").each(function(){
    				var price= $(this).find(".c_price").html();
    				var count= 1;
    				total+=price*count;
    			 });
    		 }
    		 return total;
    	}
    	
    	
    function initProductInfo() {
    	var url="/categorys/getAlls"
        $.ajax({
            url:url,
            method:"GET",
         //   dataType:'json',
            success:function (data) {
                var vos = data.data;
                globalProducts=vos;
               var categorysHtml='';
                 for(var i=0;i<vos.length;i++){	
                	 categorysHtml += "<option value='"+vos[i].category.id+"'>"+vos[i].category.name+"</option>"
               }  
               
               $("#category").append(categorysHtml);
                form.render();//重新绘制表单，让修改生效 
            }
        });
    }
    
    

     
     initSubscribeInfo();
     function initSubscribeInfo() {
         var queryArgs = $tool.getQueryParam();//获取查询参数
         var id = queryArgs['id'];
         var url = '/subscribe/service/'+id;
         $.ajax({
             url:url,
             method:"GET",
             success:function (data) {
            	 var obj=data.data;
            	 var items=obj.subscribeProductDtos;
                $("#memberName").html(obj.username);
                $("#memberPhone").html(obj.phone);
               $("#carPlateNumber").html(obj.carNum);
               $("#carInfo").html(obj.memberCarInfo);
                
               	 var html='';
              	 if(items!=null && items.length>0){
              		for(var i=0;i<items.length;i++){	
              			 html+='<tr class="valid_tr">'+
                	      '<td>'+items[i].categoryName+'</td>'+
                	      '<td data-id="'+items[i].id+'" class="product">'+items[i].name+'</td>'+
                	      '<td class="c_price">'+items[i].price+'</td>'+
 	               	   '<td>'+
 	         	      '		<button class="layui-btn layui-btn-danger delProduct" type="button">'+
 	         	      '   		<i class="layui-icon">&#xe640;</i> 删除'+
 	         	      '		</button>'+
 	         	      '</td>'+
                	      ' </tr>';	
              		}
              		 if($("#emptyRow").length>0){
            	    	  $("#emptyRow").remove();
            	      	}
              		if($("#totalRow").length==0){
               		  $("#sendList").append('<tr id="totalRow"><td colspan="7" align="center" id="totalPrice"></td></tr>')
               	  	}
              		
              		 $("#sendList tr:last").before(html);
              		$("#totalPrice").html("合计:"+calculate()+"元");
              	 }

                 form.render();//重新绘制表单，让修改生效 
             }
         });
        
     }
   
     $(document).on('click','.delProduct',function(){
    	 var $_this=$(this);
    	 var productId=$(this).parent().parent().find(".product").attr("data-id");
    	
    	 var queryArgs = $tool.getQueryParam();//获取查询参数
    	 var subscribeId = queryArgs['id'];
    	 var obj=new Object();
    	 obj.subscribeId=subscribeId;
    	 obj.productId=productId;
    	 var url='/subproduct/delete';
    	 $.ajax({
             url:url,
             method:"POST",
             data:JSON.stringify(obj),
             contentType : 'application/json',
             success:function (data) {
            	 if(data.code==2000){
            		 	$_this.parent().parent().remove();
            	      $("#totalPrice").html("合计:"+calculate()+"元");
            	      if($("#sendList:has('.valid_tr')").length==0){
	            	      $("#totalRow").remove();
	            	      $("#sendList").html('<tr><td id="emptyRow" colspan="7" align="center">列表空空 的,什么也没有</td></tr>')
            	      }
            	 }else{
            		 top.layer.msg(data.msg);
            	 }
             }
    	 });
    	
     }); 
     
     form.on("submit(addProducts)", function (data) {
    	 var category= $("#category").find("option:selected").text();
    	 var product= $("#product").find("option:selected").text();
         var price=$("#productPrice").html();
         
    	 var productId= $("#product").find("option:selected").val();
    	 var queryArgs = $tool.getQueryParam();//获取查询参数
         var subscribeId = queryArgs['id'];
    	 var obj=new Object();
    	 obj.subscribeId=subscribeId;
    	 obj.productId=productId;
    	 var url='/subproduct/add';
    	 $.ajax({
             url:url,
             method:"POST",
             data:JSON.stringify(obj),
             contentType : 'application/json',
             success:function (data) {
            	if(data.code==2000){
               	 var html='';
            	 html+='<tr class="valid_tr">'+
            	      '<td>'+category+'</td>'+
            	      '<td data-id="'+productId+'" class="product">'+product+'</td>'+
            	      '<td class="c_price">'+price+'</td>'+
            	      '<td>'+
            	      '		<button class="layui-btn layui-btn-danger delProduct" type="button">'+
            	      '   		<i class="layui-icon">&#xe640;</i> 删除'+
            	      '		</button>'+
            	      '</td>'+
            	      ' </tr>';
            	      
            	      if($("#emptyRow").length>0){
            	    	  $("#emptyRow").remove();
            	      } 
            	 // $("#sendList").append(html);
             	  if($("#totalRow").length==0){
            		  $("#sendList").append('<tr id="totalRow"><td colspan="7" align="center" id="totalPrice"></td></tr>')
            	  }
            	  $("#sendList tr:last").before(html);
            	  $("#totalPrice").html("合计:"+calculate()+"元"); 	
            	}else{
            		top.layer.msg(data.msg);
            	}
             }
     })
     	return false;
     });
     
     
      form.on("submit(finish)", function (data) {
    	var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
    	var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
  		  $.ajax({
	  			cache : false,
	  			type : "POST",
	  			url : '/subscribe/finish',
	  			
	  			data : {subcribeId:id},// json数据
	  			async : false,
	  			success : function(data) {
	  				if(data.code==2000){
	  					top.layer.close(index);
		  				top.layer.msg("结算成功！");
		  				layer.closeAll("iframe");
		  				parent.location.reload();
	  		 
	  				}else{
	  					top.layer.msg("保存失败！");
	  				}
          	 		//刷新父页面
          	 		//parent.location.reload();
	  			}
  			}); 
    	  return false;
     })
      
     
    /**
     * 表单提交
     * */
     form.on("submit(editCategorys)", function (data) {
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        var name = data.field.name;
        //请求
        var url ='/categorys/update';
        var req = {
            id:id,
            name: name,
        };
        $.ajax({
            url: url,
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify(req),
            method: "post",
            success: function (data) {
                //top.layer.close(index);(关闭遮罩已经放在了ajaxExtention里面了)
             
                	 layer.msg("用户更新成功！", {time: 1000}, function () {
                         layer.closeAll("iframe");
                         //刷新父页面
                         parent.location.reload();
                     });
                
               
            }
           
        });

        return false;
    }) 

});

</script>




</body>
</html>